<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客后台管理系统 - 登录</title>
    <!-- 引入 layui.css -->
    <link href="./2.12.1/css/layui.css" rel="stylesheet">
    <style>
        body {
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            width: 350px;
            padding: 30px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .login-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2 class="login-title">博客后台登录</h2>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 引入 layui.js -->
    <script src="./2.12.1/layui.js"></script>
    <script>
        // 初始化数据
        function initData() {
            if (!localStorage.getItem('tags')) {
                localStorage.setItem('tags', JSON.stringify([
                    {id: 1, name: '技术'},
                    {id: 2, name: '生活'},
                    {id: 3, name: '随笔'}
                ]));
            }
            
            if (!localStorage.getItem('articles')) {
                localStorage.setItem('articles', JSON.stringify([
                    {
                        id: 1,
                        title: 'Layui入门教程',
                        content: 'Layui是一款经典模块化前端框架...',
                        tags: [1],
                        createTime: '2023-05-01 10:00:00'
                    },
                    {
                        id: 2,
                        title: 'JavaScript高级编程',
                        content: 'JavaScript是一种高级编程语言...',
                        tags: [1, 2],
                        createTime: '2023-05-02 14:30:00'
                    },
                    {
                        id: 3,
                        title: '我的生活感悟',
                        content: '生活就像一杯茶，需要细细品味...',
                        tags: [2, 3],
                        createTime: '2023-05-03 09:15:00'
                    }
                ]));
            }
        }
        
        // 初始化
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            
            // 初始化数据
            initData();
            
            // 检查是否已登录
            if (localStorage.getItem('isLoggedIn') === 'true') {
                window.location.href = 'index.html';
            }
            
            // 登录表单提交
            form.on('submit(login)', function(data){
                // 简单验证，实际项目中需要与后端API交互
                if (data.field.username === 'admin' && data.field.password === '123456') {
                    localStorage.setItem('isLoggedIn', 'true');
                    localStorage.setItem('username', data.field.username);
                    window.location.href = 'index.html';
                } else {
                    layer.msg('用户名或密码错误');
                }
                return false;
            });
        });
    </script>
</body>
</html>